<template>
  <div>
    <div class="top"></div>
    <div class="wrap">
      <div class="filmName">
        <span>北辰财富中心影院<van-icon name="arrow" /></span>
        <span>已完成</span>
      </div>
      <van-divider
        hairline
        :style="{ borderColor: 'rgb(224, 224, 224)', padding: '0 16px' }"
      >
      </van-divider>
      <!-- <van-divider /> -->
      <div class="articleItem-wrapper" @click="orderItem">
        <div class="child">
          <div class="content">
            <div class="articleImg">
              <img :src="`http://10.36.4.254:8080${order.poster}`" />
            </div>
            <div class="articleDes">
              <div class="desTitle">
                <span>{{ order.name }}</span>
              </div>
              <div class="desContent">
                <span>{{order.hall_name}}&nbsp;({{order.type}})</span>
              </div>
              <div>
                <span>取票码：{{ order.phone_code }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <van-divider 
        :style="{borderColor: 'rgb(224, 224, 224)', padding: '0 10px' }"
      >
      </van-divider>
      <div class="total">
        <span>总价:{{order.price}}元</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["order"],
  methods: {
    orderItem() {
      console.log("xiangqing");
    },
  },
};
</script>

<style scoped>
.top {
  height: 15px;
}
.filmName {
  display: flex;
  justify-content: space-between;
  margin-left: 1rem;
  margin-top: 1rem;
  margin-right: 1rem;
  font-size: 15px;
  color: rgb(158, 157, 157);
}
.total {
  margin-left: 1rem;
  margin-bottom: 1rem;
  font-size: 15px;
  color: rgb(158, 157, 157);
}
.wrap {
  border-block: 1px solid rgb(241, 240, 240);
  background-color: rgb(255, 255, 255);
}
.articleItem-wrapper {

  width: 90%;
  height: 6rem;
  margin: 0px auto;
  position: relative;
}
.child {
  height: 6rem;
}
.desContent {
  color: rgb(124, 124, 124);
  font-weight: bold;
}
.content {
  /* margin-top: 0.75rem; */
  height: 6rem;
  display: flex;
  /* background-color: blue; */
}
.articleImg {
  margin-right: 15px;
  /* margin-left: 15px; */
  width: 5rem;
  height: 6rem;
  /* background-color: black; */
  /* border: 1px solid #444; */
  /* border-radius: 5px; */
}
.articleImg img {
  width: 4rem;
  height: 5.5rem;
  border: 1px solid rgb(160, 155, 155);
  border-radius: 5px;
}
.articleDes {
  width: 100%;
  font-size: 15px;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  line-height: 1.5rem;
  letter-spacing: normal;
  color: rgb(158, 157, 157);
}
.desTitle {
  margin-bottom: 1rem;
  font-size: 20px;
  font-weight: bold;
  color: black;
}
</style>
